<template>
    <el-row :gutter="10" class="bigrow">
        <!-- <button @click="testFn">动态修改样式</button> -->
        <el-row class="row1">
            <span :class="classObj"> 当前订单状态：{{ orderDeatil.order_state == 0?'已交易':orderDeatil.order_state == 1?'待发货':orderDeatil.order_state == 2?'已发货':'已完成' }} </span>
            <span>
                <el-form-item label="订单状态">
                    <el-select
                        v-model="quanXianId"
                        clearable
                        placeholder="订单状态"
                    >
                        <el-option
                            v-for="item in category"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                    <el-button type="primary" size="default" @click="editOrder" >修改订单</el-button>
                </el-form-item>
                 
            </span>
        </el-row>
        <span class="spanel"> 基本信息</span>
        <el-row class="row2">
            <div class="divbox">
                <div class="top">订单编号</div>
                <div class="bottom">{{ orderDeatil.number }}</div>
            </div>
            <div class="divbox">
                <div class="top">用户账号</div>
                <div class="bottom">{{ orderDeatil.user }}</div>
            </div>
            <div class="divbox">
                <div class="top">自动确认收货时间</div>
                <div class="bottom">15天</div>
            </div>
            <div class="divbox">
                <div class="top">支付方式</div>
                <div class="bottom">{{ orderDeatil.pay_state==1?'已支付':'未支付' }}</div>
            </div>
            <div class="divbox">
                <div class="top">订单来源</div>
                <div class="bottom">{{ orderDeatil.order_from }}</div>
            </div>
            <div class="divbox">
                <div class="top">订单类型</div>
                <div class="bottom">正常订单</div>
            </div>
        </el-row>
        <span class="spanel"> 收货人信息</span>
        <el-row class="row3">
            <div class="divbox">
                <div class="top">收货人编号</div>
                <div class="bottom">{{ userInfo.id }}</div>
            </div>
            <div class="divbox">
                <div class="top">收货人信息</div>
                <div class="bottom">{{ userInfo.name }}</div>
            </div>
            <div class="divbox">
                <div class="top">手机号码</div>
                <div class="bottom">{{ userInfo.tel }}</div>
            </div>
            <div class="divbox">
                <div class="top">收货地址</div>
                <div class="bottom">{{ userInfo.province }} {{ userInfo.city }} {{ userInfo.county }}</div>
            </div>
        </el-row>
        <span class="spanel"> 商品信息</span>
        <el-table
            :data="goodsInfo"
            style="width: 100% ;padding-left: 30px;"
        >
            <el-table-column label="商品图片"  width="200">
                <template #default="scope">
                    <el-image
                        :src="'http://localhost:3000/test/pic?img='+scope.row.img_url"
                        style="width: 100px; height: 100px"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="product" width="100"></el-table-column>
            <el-table-column label="价格" >
                <template #default="scope">
                    ￥{{ scope.row.price * 1 }}
                </template>
            </el-table-column>
            <el-table-column label="属性" >
                <template #default="scope">
                    {{ scope.row.category_id==1?'早餐':scope.row.category_id==2?'午餐':scope.row.category_id==3?'晚餐':'其他' }}
                </template>
            </el-table-column>
            <el-table-column label="数量"  prop="num" width="80"></el-table-column>
            <el-table-column label="小计" >
                <template #default="scope">
                    ￥{{ scope.row.num * scope.row.price * 1 }}
                </template>
            </el-table-column>
        </el-table>
        <div class="totalPrice">
            <div>合计:<span>￥ {{ orderDeatil.total_price }}</span></div> 
        </div>
        
    </el-row>
</template>

<script lang="ts" setup>
import axios from 'axios'
import {useRoute} from 'vue-router'
import { ref,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const route = useRoute()

let orderId = ref()
let orderDeatil = ref({})
let userInfo  = ref({})
let goodsInfo = ref([])

let category = ref([
    {id:0,name:'已交易'},
    {id:1,name:'待发货'},
    {id:2,name:'已发货'},
    {id:3,name:'已完成'},
])

let quanXianId = ref()
const testFn2 = ()=>{
    console.log(quanXianId.value);
}

const getOrderDetail = async (id)=>{

    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/goods/orderdetail',
        //post请求参数使用data选项, get参数 params选项
        params: {
            id
        }
    })
    const {code,info} = res.data
    if(code === 1 ){
        orderDeatil.value = info.list[0]
    }
    userInfo.value = JSON.parse(orderDeatil.value.user_ad_info)
    goodsInfo.value = JSON.parse(orderDeatil.value.goods_info)
    // console.log(orderDeatil.value)
    // console.log(JSON.parse(orderDeatil.value.goods_info))
    // console.log(JSON.parse(orderDeatil.value.user_ad_info))
    testFn()
}

const getOrderId = async ()=>{
    orderId.value = route.query.id
}

const editOrder = async ()=>{
    // orderId.value
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/goods/editorder',
        //post请求参数使用data选项, get参数 params选项
        data: {
            id:orderId.value,
            orderState:quanXianId.value
        }
    })
    const {code} = res.data
    if(code === 1 ){
        ElMessage({
            message: '订单状态更改成功!',
            type: 'success',
        })
        getOrderDetail(orderId.value)
    }else{
        ElMessage({
            message: '订单状态更改失败!',
            type: 'error',
        })
    }
}
const classObj = ref({
    'class-a': true,
    'class-b': false,
    'class-c': false,
    'class-d': false,
})

const testFn = ()=>{
    classObj.value['class-a'] = false
    classObj.value['class-b'] = false
    classObj.value['class-c'] = false
    classObj.value['class-d'] = false

    if(orderDeatil.value.order_state == 0) classObj.value['class-a'] = true
    if(orderDeatil.value.order_state == 1) classObj.value['class-b'] = true
    if(orderDeatil.value.order_state == 2) classObj.value['class-d'] = true
    if(orderDeatil.value.order_state == 3) classObj.value['class-c'] = true
}

onMounted(() => {
    getOrderId()
    getOrderDetail(orderId.value)
})
</script>

<style lang="scss" scoped>
.bigrow {
    padding-left: 100px;
    padding-right: 100px;
    .el-row{
        // padding-left: 20px;
    }
    .class-a{
        padding-left: 30px;
        color: #FF6263;
    }
    .class-b{
        padding-left: 30px;
        color: #F59F34;
    }
    .class-c{
        padding-left: 30px;
        color: green;
    }
    .class-d{
        padding-left: 30px;
        color: #00A0FF;
    }
    .spanel{
        color: gray;
        padding-left: 30px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .totalPrice{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        span{
            color: #FF6263;
        }
    }
    .row1{
        padding: 10px;
        padding-left: 0px;
        padding-right: 30px;
        box-sizing: border-box;
        width: 100%;
        background-color: #f1f6fc;
        height: 75px;
        display: flex;
        align-items: center;
        color: #FF6263;
        justify-content: space-between;
        .spanState{
            padding-left: 30px;
        }
    }
    .row2,.row3{
        width: 100%;
        display: flex;
        .divbox{
            width: 16.6%;
            .top{
                height: 35px;
                background-color: #f1f6fc;
                border: 1px solid #e6e6e6;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .bottom{
                height: 55px;
                color: gray;
                border: 1px solid #e6e6e6;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .row3{
        .divbox{
            width: 25%;
        }
    }
}
</style>
